<template>
	<view class="office">
		<div>
			<navitop>
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outlot"></i>
				<span slot="center-slot"><h4>{{titles}}</h4></span>
				<!-- <i  slot="right-slot" class="iconfont icon-youcecaidan" @click="class_sort"></i> -->
			</navitop> 
		</div>
		<view :style="'margin-top:' + nv_height">
			<div class="office_mod">
				<div class="office_title">
					<text class="Star_color">*</text><text>标题:</text><input placeholder="请输入标题" v-model="title" >
				</div>
				<div class="office_title">
					<text class="Star_color">*</text><text>类型:</text>
					<picker class="office_picker" @change="office_time" :value="index" :range='array' mode="selector">
						<view class="uni-input">{{endDate == '' ? '选择时间': array[index]}}</view>
					</picker>
				</div>
				<div class="office_title">
					<text>时间:</text>
					<div class="office_ovti" v-if="custom_time">{{dispaly_time[0]}}~{{dispaly_time[1]}}</div>
					<div  class="office_ovti office_comet" v-else>
						<div><kxTime :date="beginDate" :start='1' @rundata='beginTime' ></kxTime></div> ~
						<div><kxTime :date="endDate" :start='1' @rundata='lastTime' ></kxTime></div>
					</div>
				</div>
				<div class="office_pl">
					<div>{{choice_Time == 2 ? '总结' : choice_Time == 3 ? '报表' :'计划'}}</div>
					<div class="textarea" contenteditable="true" ref="textare"></div>
				</div>
				<div class="office_pl" v-if="choice_Time == 2">
					<div>评价:</div>
					<div class="textarea" contenteditable="true" ref="evaluate"></div>
					<div class="office_evaluate">
						<text>自评等级:</text>
						<picker class="evaluate_picker" @change="evaluate_data" :value="index" :range='evaluate' mode="selector">
							<view class="uni-input" >{{myEvaluationLevel == '' ? '评价等级': myEvaluationLevel}}</view>
						</picker>
						
					</div>
				</div>
				<div class="office_pl" v-if="choice_Time == 3">
					<div>计划:</div>
					<div class="textarea" contenteditable="true" ref="nextContent"></div>
					<div>评价:</div>
					<div class="textarea" contenteditable="true" ref="myEvaluationContent"></div>
					<div class="office_evaluate">
						<text>自评等级:</text>
						<picker class="evaluate_picker" @change="evaluate_data" :value="index" :range='evaluate' mode="selector">
							<view class="uni-input" >{{myEvaluationLevel == '' ? '评价等级': myEvaluationLevel}}</view>
						</picker>
					</div>
				</div>
				<div>
					<text>附件:</text>
					<imgUploaddify :max="3" :headers="token"  v-model="ceshiData" :uploadSuccess="zidingyiSuccess" :action="action"></imgUploaddify>
				</div><br>
			</div>
			<div class="office_button" @click="office_click">
				保存
			</div> 
			
			
		<!-- 	
			<view class="padding" style="border: 1px solid red;">
				<lsj-upload 
				ref="lsjUpload"
				width="100px"
				height="180px"
				childId="upload"
				:size="10"
				v-model="percent"
				@input="onInput"
				@callback="onCallback">
					<view class="btn" style="height: 180rpx;">选择附件上传</view>
				</lsj-upload>
			</view>
				
			
			<view class="padding" style="text-align: center;">
				上传进度：{{percent}}
			</view> -->
			
		</view>
	</view>
</template>

<script> 
	import {getToday,getCurrWeekDays,getCurrMonthDays,getCurrQuarter,getCurrYear} from "@/common/api/job/alert"
	import imgUploaddify from "@/components/image-upload/image-uploads"	
	import navitop from '@/components/common/navi-top'
	import kxTime from "@/components/kx-datetime/kx-datetime"
	import {save} from '@/common/api/job/office'
	export default {
		components:{
			navitop,
			imgUploaddify,
			kxTime,
		},
		data(){
			return {
				array: [],
				percent: '',
				index: 0,
				titles: '',
				nv_height: '',	//获取导航高度 
				token: [],
				ceshiData: [], // 图片显示
				action: '',
				choice_Time: '',	// 判断用户选择时间
				title_Name: '',
				dispaly_time: ['开始时间','结束时间'],	// 用户选择结果
				evaluate: ['A','B','C','D'],
				content:'',
				title: '',
				beginDate: '',     // 开始时间
				endDate: '',		// 结束时间
				time_type: '',		// 时间分类
				custom_time: true,		// 自定义时间
				myEvaluationLevel: '',	// 自我评价等级
			}
		},
		onLoad(option) {
			this.titles = option.title;
			this.choice_Time = option.key;
			this.title_Name = option.name;
		},
		mounted() {
			this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
			this.token = {'Access-Token':uni.getStorageSync('token')};
			
			// 文件上传路径
			this.action = uni.getStorageSync('serverUrl') + '/uploadFile';
			
			console.log(this.action)
		},
		watch:{
			choice_Time(val){
				if(val == 3){
					this.array = ['日报','周报','月报','年报','自定义'];
				}else {
					this.array = ['周','月','季','年','自定义'];
				}
			},
		},
		onReady() {
			// 初始化参数并创建上传DOM
			this.onCreate();
		},
		methods: {
			
			onInput(e) {
				console.log('上传进度',e);
			},
			onCallback(e) {
				console.log('上传结果',e);
			},
			onCreate() {
				// 初始化参数并创建上传DOM
				this.$refs.lsjUpload.create({
					// #ifdef APP-PLUS
					cuWebview: this.$mp.page.$getAppWebview(), // app必传
					// #endif
					url: 'http://nosy.vicp.cc:8000/uploadFile', //替换为你的接口地址
					name: 'file', // 附件key
					size: 10, // 附件上传大小上限(M)，默认10M
					debug: true,
					//根据你接口需求自定义请求头
					header: {
						'Access-Token':uni.getStorageSync('token')
					},
					//根据你接口需求自定义body参数
					formData: {
						'orderId': 1000
					}
				});
			},
			
			
			// 自评等级
			evaluate_data(val){
				this.myEvaluationLevel = this.evaluate[val.detail.value];
			},
			
			// 返回
			outlot(){
				uni.navigateBack({
					url: "/pages/common/index/office/officelist?key=" + this.choice_Time + '&title=' + this.title_Name
				})
			},
			
			// 获取开始时间
			beginTime(val){
				this.beginDate = val;
			},
			
			// 获取结束时间
			lastTime(val){
				this.endDate = val;
			},
			
			// 获取选中期间
			office_time(val){
				this.index = val.detail.value;
				this.dispaly_time = [];
				this.beginDate = '';
				this.endDate = '';
				if(this.index == 4){
					this.custom_time = false;
					return false;
				}
				this.custom_time = true;
				if(this.choice_Time == 3){
					if(this.index == 0){
						this.dispaly_time.push(getToday().endtime.substr(0,10));
						this.dispaly_time.push(getToday().starttime.substr(0,10));
						this.beginDate = getToday().starttime;
						this.endDate = getToday().endtime;
						this.time_type = 1;
					}
					if(this.index == 1){
						this.office_Echo(this.index);
						this.time_type = 2;
					}
					if(this.index == 2){
						this.office_Echo(this.index);
						this.time_type = 3;
					}
					if(this.index == 3){
						this.office_Echo(4);
						this.time_type = 4;
					}
				}else{
					if(this.index == 0){
						this.office_Echo(1);
						this.time_type = 1;
					}
					if(this.index == 1){
						this.office_Echo(2);
						this.time_type = 2;	
					}
					if(this.index == 2){
						this.office_Echo(3);
						this.time_type = 3;	
					}
					if(this.index == 3){
						this.office_Echo(4);
						this.time_type = 4;	
					}
				}
			},
			
			office_Echo(val){
				if(val == 1){   // 周
					this.dispaly_time.push(getCurrWeekDays().endtime.substr(0,10));
					this.dispaly_time.push(getCurrWeekDays().starttime.substr(0,10));
					this.beginDate = getCurrWeekDays().starttime;
					this.endDate = getCurrWeekDays().endtime;
				}
				if(val == 2){	// 月
					this.dispaly_time.push(getCurrMonthDays().endtime.substr(0,10));
					this.dispaly_time.push(getCurrMonthDays().starttime.substr(0,10));
					this.beginDate = getCurrMonthDays().starttime;
					this.endDate = getCurrMonthDays().endtime;
				}
				if(val == 3){	// 季
					this.dispaly_time.push(getCurrQuarter().endtime.substr(0,10));
					this.dispaly_time.push(getCurrQuarter().starttime.substr(0,10));
					this.beginDate = getCurrQuarter().starttime;
					this.endDate = getCurrQuarter().endtime;
				}
				if(val == 4){	// 年
					this.dispaly_time.push(getCurrYear().endtime);
					this.dispaly_time.push(getCurrYear().starttime);
					this.beginDate = getCurrYear().starttime;
					this.endDate = getCurrYear().endtime;
				}
			},
			
			office_click(){
				if( !this.beginDate || !this.endDate){
					uni.showToast({
						title: '请选择时间',
						icon: 'error'
					})
					return false;
				}
				if(!this.title){
					uni.showToast({
						title: '请输入标题',
						icon: 'error'
					})
					return false;
				}
				let sun = {
					title: this.title ,
					content: this.$refs.textare.innerHTML,
					formDate: this.dispaly_time,
					files: this.ceshiData.join(","),
					beginDate: this.beginDate,
					endDate: this.endDate,
					workType: this.choice_Time,
					type: this.time_type,
				};
				
				if(this.choice_Time == 2){
					sun['myEvaluationContent'] = this.$refs.evaluate.innerHTML;
					sun['myEvaluationLevel'] = this.myEvaluationLevel;
				}
				
				if(this.choice_Time == 3){
					sun['myEvaluationContent'] = this.$refs.myEvaluationContent.innerHTML;
					sun['myEvaluationLevel'] = this.myEvaluationLevel;
					sun['nextContent'] = this.$refs.nextContent.innerHTML;
				}
				
				uni.showLoading({
					title: '正在提交...'
				})
				save(sun).then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: '保存成功！'
						})
						setTimeout(()=>{
							uni.navigateBack({
								url: "/pages/common/index/office/officelist?key=" + this.choice_Time + '&title=' + this.title_Name
							})
						},1500)
					}
				})
				
				
			},
			
			 //上传成功
			ceshiUploadSuccess(res) {
				var _res = JSON.parse(res.data);
				if (_res.code == 200) {
					this.ceshiData.push(_res.result);
				}
			},
			zidingyiSuccess(res){
				var _res = JSON.parse(res.data);
				 this.ceshiData.push(_res.url);
				if (_res.code == 200) {
					return {
						success: true,
						url: 'http://192.168.1.127:8000' + _res.result
					}
				} else {
					return {
						success: false,
						url: ''
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.office {
	height: 100%;
	width: 100%;
	.office_mod {
		width: 95%;
		background-color: #fff;
		margin: auto;
		margin-top: 10px;
		padding: 0 0 0 30rpx;
		.Star_color {
			color: red;
		}
		.office_title {
			display: flex;
			height: 90rpx;
			line-height: 90rpx;
			input {
				margin-left: 30rpx;
			}
			.office_picker {
				padding: 0 40% 0 40rpx;
			}
			.office_ovti {
				padding: 0 0 0 45rpx;
			}
		}
	}
		.office_button {
			margin: auto;
			text-align: center;
			padding: 10px 0 10px 0;
			background-color: rgb(34, 131, 228);
			border-radius: 4px;
			color: #fff;
		}
		.office_pl {
			textarea {
				width: 100%;
			}
			.office_evaluate {
				height: 90rpx;
				line-height: 90rpx;
				padding: 0 0 10px 0;
				display: flex;
			}
			.evaluate_picker {
				padding: 5rpx 30rpx 5rpx 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				border: 1px solid #cacaca;
				border-radius: 4px;
				margin: 10rpx 0 0 30rpx;
			}
		}
		.textarea{
			width: 90%;
			min-height: 200px;
			_height: 120px;
			margin-left: auto;
			margin-right: auto;
			padding: 3px;
			outline: 0;
			font-size: 12px;
			line-height: 24px;
			word-wrap: break-word;
			overflow-x: hidden;
			overflow-y: auto;
			margin-top: 10px;
			margin-bottom: 10px;
			border-radius: 4px;
			border: 1px solid #cacaca;
		}
		.office_comet {
			display: flex;
			width: 75%;
			margin: auto;
			justify-content: space-around;
			div {
				overflow: hidden;
			}
		}
}
	
</style>
